<!--
 * @FilePath     : /vision/src/components/Stock.vue
 * @Author       : 哒哒哒
 * @Date         : 2024-05-24 16:25:19
 * @Description  :  销量与库存模块（圆环图）
 * Copyright    : G AUTOMOBILE RESEARCH INSTITUTE CO.,LTD Copyright (c) 2024.
-->

<template>
    <div class="com-page" :class="{ 'fullscreen': isFullScreen }">
        <div class="com-container">
            <div class="com-chart" ref="stock_ref"></div>
        </div>
        <!-- 右上角方法按钮   -->
        <FullSCreenIcon :isFullScreen="isFullScreen" @toggleFullScreen="changeFullScreen"></FullSCreenIcon>
    </div>
</template>

<script>
import { throttle } from '@/utils';
import FullSCreenIcon from './FullScreenIcon/index.vue'
import FullscreenMixin from './mixins/FullscreenMixin'
import ThemeMixins from '@/mixins/ThemeMixins';
export default {
    /* eslint-disable */
    name: 'Stock',
    mixins: [FullscreenMixin, ThemeMixins],
    components: {
        FullSCreenIcon
    },
    data() {
        return {
            // 图标实例
            chartInstance: null,
            // 服务器返回的所有数据
            allData: null,
            // 当前显示的页数
            currentPage: 1,
            // 定时器标识
            timerId: null,
            // 记录监听事件，用于取消事件
            throttledAdaptScreen: null
        }
    },
    created() {
        this.$socket.registerCallback('stockData', this.getData)
    },
    async mounted() {
        this.initChart();
        this.$socket.send({
            action: 'getData',
            socketType: 'stockData',
            chartName: 'stock',
            value: ''
        })
        this.adaptScreen();
        this.throttledAdaptScreen = throttle(this.adaptScreen, 100)
        window.addEventListener('resize', this.throttledAdaptScreen);
    },
    destroyed() {
        this.$socket.unRegisterCallback('stockData')
        clearInterval(this.timerId);
        window.removeEventListener('resize', this.throttledAdaptScreen)
    },
    methods: {
        // 初始化表格
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.stock_ref, this.theme)
            const initOption = {
                title: {
                    text: '▎销量与库存分析',
                    left: 20,
                    top: 20
                },
            }
            this.chartInstance.setOption(initOption)
            // 绑定事件,鼠标移入时，关闭定时器
            this.chartInstance.on('mouseover', () => {
                clearInterval(this.timerId)
            })
            // 鼠标移除时，打开定时器
            this.chartInstance.on('mouseout', () => {
                this.startInterval()
            })
        },
        // 获取数据
        async getData(data) {
            // const {data} = await this.$http.get('http://127.0.0.1:8888/api/stock')
            this.allData = data;
            // 渲染数据
            this.updateChart();
            // 打开定时器
            this.startInterval();
        },
        // 更新表格
        updateChart() {
            // 设置五个圆环的坐标
            const centerArr = [
                ['18%', '40%'],
                ['50%', '40%'],
                ['82%', '40%'],
                ['34%', '75%'],
                ['66%', '75%']
            ]
            const colorArr = [
                ['#4FF778', '#0BA82C'],
                ['#E5DD45', '#E8B11C'],
                ['#E8821C', '#E55445'],
                ['#5052EE', '#AB6EE5'],
                ['#23E5E5', '#2E72BF']
            ]
            let start = (this.currentPage - 1) * 5;
            let end = this.currentPage * 5;
            const showData = this.allData.slice(start, end);
            const seriesArr = showData.map((item, index) => ({
                type: 'pie',
                // 设置五个圆环的坐标
                center: centerArr[index],
                // 关闭鼠标悬浮时的动画
                hoverAnimation: false,
                // 去掉label的线
                labelLine: {
                    show: false
                },
                label: {
                    // 设置label位置
                    position: 'center',
                    // 设置label颜色
                    color: colorArr[index][0]
                },
                data: [
                    {
                        // 设置库存的label
                        name: item.name + '\n\n' + item.sales,
                        value: item.sales,
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 0,
                                    color: colorArr[index][0]
                                },
                                {
                                    offset: 1,
                                    color: colorArr[index][1]
                                }
                            ])
                        }
                    },
                    {
                        value: item.stock,
                        itemStyle: {
                            color: '#333843'
                        }
                    }
                ]
            }))
            const dataOption = {
                series: seriesArr
            }
            this.chartInstance.setOption(dataOption)
        },
        // 根据屏幕尺寸，将图标适配屏幕
        adaptScreen() {
            const fontSize = this.$refs.stock_ref.offsetWidth / 100 * 3.6
            const innerRadius = fontSize * 2.8
            const outterRadius = innerRadius * 1.125
            const adaptOption = {
                title: {
                    textStyle: {
                        fontSize: fontSize
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: [outterRadius, innerRadius],
                        label: {
                            fontSize: fontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outterRadius, innerRadius],
                        label: {
                            fontSize: fontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outterRadius, innerRadius],
                        label: {
                            fontSize: fontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outterRadius, innerRadius],
                        label: {
                            fontSize: fontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outterRadius, innerRadius],
                        label: {
                            fontSize: fontSize / 2
                        }
                    }
                ]
            }
            this.chartInstance.setOption(adaptOption)
            this.chartInstance.resize();
        },
        startInterval() {
            if (this.timerId) clearInterval(this.timerId)
            this.timerId = setInterval(() => {
                this.currentPage = this.currentPage == 1 ? 2 : 1;
                this.updateChart()
            }, 5000);
        }
    }
}
</script>

<style scoped lang='less'></style>